<template>
  <e-container class="search-area">
    <slot></slot>
    <a-space v-if="canEdit && isCurrentYear" class="buttons">
      <a-button v-if="isEdit" @click="handleCancel">Cancel</a-button>
      <a-button v-if="isEdit" class="secondary" @click="handleSave">Save</a-button>
      <a-button v-if="!isEdit" class="secondary" @click="handleSet">
        <e-icon type="edit" color="#fff" style="margin-right: 12px" />
        Set
      </a-button>
    </a-space>
  </e-container>
</template>

<script setup>
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
const emits = defineEmits(['cancel', 'save', 'set'])
defineProps({
  isEdit: {
    type: Boolean,
    default: false
  },
  canEdit: {
    type: Boolean,
    default: true
  },
  isCurrentYear: {
    type: Boolean,
    default: true
  }
})
/**
 * 取消
 */
const handleCancel = () => emits('cancel')
/**
 * 保存
 */
const handleSave = () => emits('save')
/**
 * 设置
 */
const handleSet = () => emits('set')
</script>

<style scoped lang="less">
.search-area {
  position: relative;
  min-height: 106px;
  .buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    .secondary {
      background-color: @primary-color;
      border-color: @primary-color;
      margin-left: 16px;
    }
  }
}
</style>
